import { useState, useEffect } from 'react'
import Loader from './Loader'
import Header from './Header'
import Results from './Results'
import axios from 'axios'

function App() {
  // 数据驱动界面
  const [beers, setBeers] = useState([]);
  // { // 放 json-server 里了
  //   id: 1,
  //   title: '百威',
  //   pic: 'https://img11.360buyimg.com/n7/jfs/t1/134175/27/28106/450362/626747eeEac924c6e/bb65d4d35ed7ea93.jpg'
  // },
  // {
  //   id: 2,
  //   title: '雪花',
  //   pic: 'https://img11.360buyimg.com/n7/jfs/t1/125419/39/22707/151885/628c69f4E6bfb698f/cc2e4392b60ca899.jpg'
  // }
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    // 优先显示组件，延后加载数据
    (async function () {
      // json-server 早期用
      // fast mock 提供在线接口伪造工具
      // aip 调用
      // const response = await fetch('https://www.fastmock.site/mock/018f2f4196267c1bddbb4a8bd3f00d9c/beers/list')
      // const data = await response.json()
      const data = await axios.get('https://www.fastmock.site/mock/018f2f4196267c1bddbb4a8bd3f00d9c/beers/list')
      console.log(data)// 牛蛙牛蛙
      setBeers(data.data.beers)
      setLoading(false)
    })()
  }, [])
  return (
    <div className="wrapper">
      {/* 组件化思维 */}
      {/* 非自有的 props 其实让组件更好的复用 和 协作 */}
      <Header siteName="Beer me!" />
      {/* ↓ 状态组件，页面动态的一种状态 */}
      {loading && <Loader message="正在加载啤酒列表..." />}
      <Results beers={beers} loading={loading} />
    </div>
  )
}

export default App
